<link rel="stylesheet" href="<?php echo base_url(); ?>assets/videos/css/videos.css" type="text/css" />
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>   

<div style="background:#FFFFFF">
	<!--[if lt IE 7]>
	<style> 
	div.apple_overlay {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
		color:#fff;
	}
	
	/* default close button positioned on upper right corner */
	div.apple_overlay div.close {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
	
	}	
	</style>
	<![endif]-->
	
<!-- first overlay. id attribute matches our selector -->
<div  class="apple_overlay" id="ytvideo">  
	<div  id="yt-container"> 
			<div class="ytVideoPlayer" id="ytVideoPlayer" >Loading...</div> 
			<div class="video_description"></div> 
		 
	</div>
</div>

<table cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<div id="videos-container">
					<div><?php echo $videos ; ?></div>
					<div id="videos-pagination"  >
						<table>
							<tr>
								<?php   
								$numberOfVPages = $totalVideos /VIDEOS_PER_PAGE;
								if($numberOfVPages > 1)
									for($i = 0; $i < $numberOfVPages ; $i++) 
										echo '<td><a href="'. base_url() . 'index.php/welcome/index/videopage/' . $i .'"><div id="pagination_' . $i  .'"  offest="'.($i*VIDEOS_PER_PAGE).'" class=" pagination button">' . ($i+1) . '</div></a></td>' ;
								 
								?>
							</tr>
						</table>
					</div>
			</div>
		</td>
		<td>
			
	
		</td>
	</tr>
</table>
</div>
<script src="<?php echo base_url() . 'libs/swfobject/swfobject.js' ?>"></script> 
<script type="text/javascript" src="<?php echo base_url(); ?>assets/videos/js/videos.js"></script>  